<!--
 * @Author: 鱿鱼溪学院
 * @Date: 2025-11-06 23:40:13
 * @LastEditTime: 2025-11-07 00:10:02
 * @LastEditors: 鱿鱼溪学院
 * @Description: 
 * @FilePath: \vue-cool\src\components\MainContent.vue
 * Copyright 鱿鱼溪学院 by edu v1.0
 * 天道酬勤
-->
<template>
  <div class="main-content">
    <ul class="content-list">
      <ArticleCard
        v-for="(article, index) in articles"
        :key="index"
        :title="article.title"
        :imageUrl="article.imageUrl"
        :views="article.views"
        :comments="article.comments"
      />
    </ul>
  </div>
</template>

<script setup lang="ts">
import ArticleCard from "./ArticleCard.vue";
// 使用@别名导入图片资源
import junduiImg from "@/assets/img/jundui.png";
import feijiImg from "@/assets/img/feiji.jpg";

// 定义文章数据结构
interface Article {
  title: string;
  imageUrl: any; // 使用any类型避免类型问题
  views: number;
  comments: number;
}

// 模拟文章数据
const articles: Article[] = [
  {
    title: "印尼确认采购中国歼-10，国防部回应",
    imageUrl: feijiImg,
    views: 220,
    comments: 0,
  },
  {
    title: "印尼确认采购中国歼-10，国防部回应",
    imageUrl: junduiImg,
    views: 220,
    comments: 0,
  },
  {
    title: '普京：俄核动力潜航器"波塞冬"有重大突破',
    imageUrl: feijiImg,
    views: 220,
    comments: 0,
  },
];
</script>

<style scoped>
.main-content {
  width: 1150px;
  padding-top: 20px;
}

.content-list {
  padding: 13px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
}
</style>
